<template>  
  <div class="login">  
    <h2>Login</h2>  
    <form @submit.prevent="login">  
      <div>  
        <label for="username">用户名:</label>  
        <input type="text" v-model="username" required />  
      </div>  
      <div>  
        <label for="password">密码:</label>  
        <input type="password" v-model="password" required />  
      </div>  
      <button type="submit">登录</button>  
    </form>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      username: '',  
      password: ''  
    };  
  },  
  methods: {  
    login() {  
      // 这里可以使用Vuex或API进行实际的登录验证  
      // 这里简单模拟  
      if (this.username === 'user' && this.password === 'password') {  
        localStorage.setItem('authenticated', 'true');  
        this.$router.push({ name: 'MyPage' });  
      } else {  
        alert('Invalid credentials');  
      }  
    }  
  }  
};  
</script>  
  
<style scoped>  
.login {  
  max-width: 300px;  
  margin: 0 auto;  
}  
</style>